iT邦幫忙

2024 iThome 鐵人賽

DAY 2
0
Modern Web

與 AI 一起開發 Side Project 吧!系列 第 2

Day2 — Cursor IDE 常用提示詞,教你怎麼下指令!

  • 分享至 

  • xImage
  •  

Cursor IDE 有蠻多小撇步與快捷鍵,可以幫我們更有效率,且可以更精準地生成優良的程式碼。

這篇將會介紹 Cursor IDE 中常用的指令為主,以及 VSCode 的快捷鍵,能夠充分發揮這些工具的潛力,大大提升開發速度呦!

Claude 的部分則是也會提一些,介紹幾個比較「通用」下指令的訣竅。

常用指令

Cursor 常用的 tag

  1. @{程式碼檔案} 檔案

    • 請 AI 讀取某些檔案作為「上下文」參考依據
    • 以此指令產出的程式碼會比較有脈絡,而不會「橫空出世」寫出不符我們要求的「範例程式碼」
    • 如以下所示,明確指示 Cursor 幫我把功能移到特定檔案來實作
      @File_img
  2. @codebase

    • 在側邊欄打開的情況下(開啟 Chat 模式),在輸入欄中輸入 @codebase
    • 輸入這個指令後,Cursor 會讀取整個專案的程式碼檔案作為「脈絡」依據,簡單來說就是加強版的 @OOXX 指令。
    • 如以下圖片所示,請 Cursor 幫我找哪些組件用到了 React Markdown 這個函式庫。
      @codebase_img
  3. 個人常用指令模板:

    • 單獨檔案篇:參考 @OOXX,幫我依據此程式碼,生成新的 {實作 / 測試 / 模板…等}。
    • 解釋檔案篇:@codebase,請幫我找到跟 {你要問的功能} 有關的程式碼 ,列出檔案並解釋其中內容。

其他 VSCode 也常用到的快捷鍵

先前已經介紹過,Cursor IDE 是基於 VSCode 的 AI 整合 IDE,這邊也幫大家整理了一些 VSCode 常用的快捷鍵。

以下這些是自己在用 Cursor 時,最常使用到的快捷鍵。

  • Cmd + Shift + P:
    • 搜尋檔案
    • 鍵入 > ,讓你可以快速執行各種 VSCode 內建或是插件之指令
  • Opt + F12:快速打開 / 關閉終端機面板。
  • F12(Cmd + B ):快速導引到「使用該程式碼」的地方

Claude 怎麼下指令?

基本技巧跟 ChatGPT 差不多,不外乎以下幾個重點,這邊幫大家整理一下:

  • 清晰且具體的指令:明確定義了你希望 AI 幫你做的事。
    • e.g. 請幫我用 TypeScript 寫一個 compose 函式,該函式接收一個數字陣列,並回傳其中最大值。
  • 提供明確的脈絡資訊:為 AI 提供相關的背景資訊(上下文脈絡資訊)。
    • e.g. 我正在開發一個線上購物網站,需要一個演算法來計算購物車中商品的總價,包括折扣和稅金之計算。
  • 給「優良」範例:除了提供指令以外,最好也給幾個範例。
    • e.g. 請給我幾個有關程式演算法範例,像是「小蝦米之於大鯨魚」這種類比方式。
  • 迭代與完善:不要期望一次就能得到完美的結果。
    • e.g. 上個回答之後,再新增有關「資料結構」的類比舉例。
  • 將複雜任務拆解串連為子任務:在處理比較複雜的任務時,最好將其拆解成小任務做串連指令。
    • 不好的範例:請幫我做一個完整的購物網站
    • 較好的範例
      • e.g. 首先,我要能夠在購物網站讓使用者可以註冊和登入,請幫我用 firebase 實作其功能。
      • e.g. 接著,幫我製作使用者的個人頁面,且該頁面須在「登入後」才能訪問。

結語

為大家總結重點

  • Cursor IDE:
    • 使用 @ 給 Cursor IDE 比較精確的「程式碼」範圍指令,生成的 Code 更為精準。
    • 熟記 VSCode 快捷鍵,開發更有效率。
  • Claude / ChatGPT:
    • 拆解:大問題拆成小問題,可以用 Follow Up 方式接續問下去。
    • 具體:以明確清晰之條件指示 AI 。
    • 脈絡:提供 AI 完整的脈絡,或是賦予其角色。

值得一提的是,因為 Cursor IDE 也是基於 Claude 或是 ChatGPT 這些 LLM 模型來生成程式碼,因此也是要以「具體且清晰脈絡」的指令,請 AI 進行生成喔!


上一篇
Day1 — 新的 Side Project 就跟 AI 一起開發吧!
下一篇
Day3 — AI 程式碼編輯器 Cursor IDE 簡介
系列文
與 AI 一起開發 Side Project 吧!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言